<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>志愿活动列表 | 爱心志愿平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E88E5', // 主色调：蓝色，代表信任和专业
                        secondary: '#388E3C', // 辅助色：绿色，代表生命和希望
                        accent: '#FF9800', // 强调色：橙色，代表活力和温暖
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E4E7ED',
                            300: '#C0C6CF',
                            400: '#909399',
                            500: '#606266',
                            600: '#303133',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 12px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 8px 24px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-600 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            <!-- Logo -->
            <div class="flex items-center">
                <a href="#" class="flex items-center">
                    <i class="fa fa-heart-o text-primary text-2xl mr-2"></i>
                    <span class="text-xl font-bold text-primary">爱心志愿者平台</span>
                </a>
            </div>

            <!-- 主导航 -->
            <nav class="hidden md:flex space-x-8">
                <a href="/activities/home" class="text-primary font-medium hover:text-primary/80 transition-custom border-b-2 border-primary">首页</a>
                <a href="#" class="text-neutral-500 font-medium hover:text-primary transition-custom">项目中心</a>
                <a href="/activities/list" class="text-neutral-500 font-medium hover:text-primary transition-custom">活动报名</a>
                <a href="#" class="text-neutral-500 font-medium hover:text-primary transition-custom">志愿服务时长</a>
                <a href="/registration/list" class="text-neutral-500 font-medium hover:text-primary transition-custom">我的活动</a>
            </nav>

            <!-- 用户信息和操作 -->
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <button class="flex items-center text-neutral-500 hover:text-primary transition-custom" id="notificationBtn">
                        <i class="fa fa-bell-o text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-accent text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                    </button>
                </div>

                <div class="relative group">
                    <button class="flex items-center space-x-2 focus:outline-none" id="userMenuBtn">
                        <img src="https://picsum.photos/seed/user123/40/40" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-primary">
                        <span class="hidden md:block text-sm font-medium">张三</span>
                        <i class="fa fa-angle-down text-neutral-400 group-hover:text-primary transition-custom"></i>
                    </button>

                    <!-- 用户下拉菜单 -->
                    <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 transform origin-top-right scale-95 group-hover:scale-100">
                        <a href="#" class="block px-4 py-2 text-sm text-neutral-600 hover:bg-primary hover:text-white transition-custom">
                            <i class="fa fa-user-o mr-2"></i>个人资料
                        </a>
                        <a href="#" class="block px-4 py-2 text-sm text-neutral-600 hover:bg-primary hover:text-white transition-custom">
                            <i class="fa fa-cog mr-2"></i>账号设置
                        </a>
                        <a href="#" class="block px-4 py-2 text-sm text-neutral-600 hover:bg-primary hover:text-white transition-custom">
                            <i class="fa fa-question-circle-o mr-2"></i>帮助中心
                        </a>
                        <div class="border-t border-neutral-200 my-1"></div>
                        <a href="#" class="block px-4 py-2 text-sm text-red-500 hover:bg-red-50 transition-custom">
                            <i class="fa fa-sign-out mr-2"></i>退出登录
                        </a>
                    </div>
                </div>

                <!-- 移动端菜单按钮 -->
                <button type="button" class="md:hidden text-neutral-500 hover:text-primary focus:outline-none" id="mobileMenuBtn">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </div>

    <%--    <!-- 移动端菜单 -->--%>
    <%--    <div class="md:hidden hidden transition-all duration-300 ease-in-out" id="mobileMenu">--%>
    <%--        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white shadow-lg">--%>
    <%--            <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-primary bg-primary/10">首页</a>--%>
    <%--            <a href="/activities/list.jsp" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/10 hover:text-primary">项目中心</a>--%>
    <%--            <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/10 hover:text-primary">活动报名</a>--%>
    <%--            <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/10 hover:text-primary">志愿服务时长</a>--%>
    <%--            <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/10 hover:text-primary">公益圈</a>--%>
    <%--        </div>--%>
    <%--    </div>--%>
</header>

<!-- 主要内容区 -->
<main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- 页面标题和搜索 -->
    <div class="mb-8 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-neutral-800">
                <i class="fas fa-volunteer-badge text-primary mr-2"></i>志愿活动列表
            </h1>
            <p class="text-neutral-600 mt-1">发现并参与更多有意义的志愿活动，一起为社会贡献力量</p>
        </div>
        <div class="relative w-full md:w-64">
            <input type="text" placeholder="搜索活动..."
                   class="w-full pl-10 pr-4 py-2 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
            <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
        </div>
    </div>

<%--    <!-- 活动分类筛选 -->--%>
<%--    <div class="mb-8 overflow-x-auto">--%>
<%--        <div class="flex space-x-2 pb-2">--%>
<%--            <button class="px-4 py-2 bg-primary text-white rounded-full text-sm font-medium">--%>
<%--                全部活动--%>
<%--            </button>--%>
<%--            <button class="px-4 py-2 bg-white text-neutral-700 rounded-full text-sm font-medium hover:bg-neutral-100 transition-colors">--%>
<%--                环保公益--%>
<%--            </button>--%>
<%--            <button class="px-4 py-2 bg-white text-neutral-700 rounded-full text-sm font-medium hover:bg-neutral-100 transition-colors">--%>
<%--                教育帮扶--%>
<%--            </button>--%>
<%--            <button class="px-4 py-2 bg-white text-neutral-700 rounded-full text-sm font-medium hover:bg-neutral-100 transition-colors">--%>
<%--                社区服务--%>
<%--            </button>--%>
<%--            <button class="px-4 py-2 bg-white text-neutral-700 rounded-full text-sm font-medium hover:bg-neutral-100 transition-colors">--%>
<%--                关爱老人--%>
<%--            </button>--%>
<%--            <button class="px-4 py-2 bg-white text-neutral-700 rounded-full text-sm font-medium hover:bg-neutral-100 transition-colors">--%>
<%--                动物保护--%>
<%--            </button>--%>
<%--            <button class="px-4 py-2 bg-white text-neutral-700 rounded-full text-sm font-medium hover:bg-neutral-100 transition-colors">--%>
<%--                其他类型--%>
<%--            </button>--%>
<%--        </div>--%>
<%--    </div>--%>

    <!-- 活动卡片网格 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <c:forEach items="${activities}" var="activity" varStatus="status">
            <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                <!-- 活动图片 -->
                <div class="relative">
                    <img src="${activity.coverImage}" alt="${activity.title}"
                         class="w-full h-48 object-cover transition-transform duration-500 hover:scale-105">
                    <!-- 活动状态标签 -->
                    <span class="absolute top-3 right-3 bg-secondary text-white text-xs font-bold px-2 py-1 rounded-full">
                            进行中
                        </span>
                </div>
                <!-- 活动内容 -->
                <div class="p-5">
                    <h3 class="text-lg font-bold text-neutral-800 mb-2 line-clamp-2">${activity.title}</h3>
                    <div class="flex items-center text-sm text-neutral-500 mb-3">
                        <i class="fas fa-map-marker-alt mr-1"></i>
                        <span>${activity.location}</span>
                    </div>
                    <div class="flex items-center text-sm text-neutral-500 mb-4">
                        <i class="far fa-clock mr-1"></i>
                        <span>
                                <fmt:formatDate value="${activity.startTime}" pattern="yyyy-MM-dd" />
                                -
                                <fmt:formatDate value="${activity.endTime}" pattern="yyyy-MM-dd" />
                            </span>
                    </div>
                    <p class="text-neutral-600 text-sm mb-4 line-clamp-2">
                            ${activity.description}
                    </p>
                    <!-- 报名按钮 -->
                    <a href="/registration/enroll?activityId=${activity.activityId}" class="block text-center">
                        <button class="btn-primary w-full">
                            <i class="fas fa-hand-holding-heart mr-1"></i> 立即报名
                        </button>
                    </a>
                </div>
            </div>
        </c:forEach>

        <!-- 空状态占位符，当没有活动时显示 -->
        <c:if test="${empty activities}">
            <div class="col-span-full bg-white rounded-xl p-8 text-center border-2 border-dashed border-neutral-200">
                <i class="fas fa-search text-5xl text-neutral-300 mb-4"></i>
                <h3 class="text-xl font-medium text-neutral-700 mb-2">暂无活动</h3>
                <p class="text-neutral-500 mb-6">目前没有符合条件的志愿活动，敬请期待更多精彩活动上线</p>
                <a href="/activities/home" class="btn-secondary">
                    返回首页
                </a>
            </div>
        </c:if>
    </div>

    <!-- 分页导航 -->
    <c:if test="${not empty activities}">
        <div class="mt-12 flex flex-col items-center">
            <nav class="flex items-center space-x-1">
                <!-- 首页和上一页 -->
                <c:if test="${currentPage > 1}">
                    <a href="${pageContext.request.contextPath}/activities/list?page=1" class="pagination-item bg-white text-neutral-700 hover:bg-neutral-100 border border-neutral-200">
                        <i class="fas fa-angle-double-left"></i>
                    </a>
                    <a href="${pageContext.request.contextPath}/activities/list?page=${currentPage - 1}" class="pagination-item bg-white text-neutral-700 hover:bg-neutral-100 border border-neutral-200">
                        <i class="fas fa-angle-left"></i>
                    </a>
                </c:if>

                <!-- 页码 -->
                <c:forEach begin="1" end="${totalPage}" var="i">
                    <c:choose>
                        <c:when test="${i == currentPage}">
                            <span class="pagination-item bg-primary text-white border border-primary">${i}</span>
                        </c:when>
                        <c:otherwise>
                            <a href="${pageContext.request.contextPath}/activities/list?page=${i}" class="pagination-item bg-white text-neutral-700 hover:bg-neutral-100 border border-neutral-200">${i}</a>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>

                <!-- 下一页和末页 -->
                <c:if test="${currentPage < totalPage}">
                    <a href="${pageContext.request.contextPath}/activities/list?page=${currentPage + 1}" class="pagination-item bg-white text-neutral-700 hover:bg-neutral-100 border border-neutral-200">
                        <i class="fas fa-angle-right"></i>
                    </a>
                    <a href="${pageContext.request.contextPath}/activities/list?page=${totalPage}" class="pagination-item bg-white text-neutral-700 hover:bg-neutral-100 border border-neutral-200">
                        <i class="fas fa-angle-double-right"></i>
                    </a>
                </c:if>
            </nav>
            <p class="text-sm text-neutral-500 mt-2">
                共 ${totalPage} 页，当前第 ${currentPage} 页，${totalCount} 个活动
            </p>
        </div>
    </c:if>
</main>


<!-- 页脚 -->
<footer class="bg-neutral-800 text-white py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center mb-4">
                    <i class="fa fa-heart-o text-primary text-2xl mr-2"></i>
                    <span class="text-xl font-bold">爱心志愿者平台</span>
                </div>
                <p class="text-neutral-400 text-sm mb-4">
                    爱心志愿者平台是一个贵州性的志愿者服务平台，致力于为志愿者和志愿组织提供便捷、高效的服务对接。
                </p>
                <div class="flex space-x-4">
                    <a href="#" class="text-neutral-400 hover:text-primary transition-custom">
                        <i class="fa fa-weibo text-lg"></i>
                    </a>
                    <a href="#" class="text-neutral-400 hover:text-primary transition-custom">
                        <i class="fa fa-wechat text-lg"></i>
                    </a>
                    <a href="#" class="text-neutral-400 hover:text-primary transition-custom">
                        <i class="fa fa-qq text-lg"></i>
                    </a>
                </div>a
            </div>

            <div>
                <h3 class="text-lg font-medium mb-4">志愿者服务</h3>
                <ul class="space-y-2 text-neutral-400">
                    <li><a href="#" class="hover:text-primary transition-custom">我要报名</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">服务项目</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">服务时长</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">志愿者培训</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">志愿者保险</a></li>
                </ul>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-4">关于我们</h3>
                <ul class="space-y-2 text-neutral-400">
                    <li><a href="#" class="hover:text-primary transition-custom">平台介绍</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">新闻公告</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">联系我们</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">常见问题</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">意见反馈</a></li>
                </ul>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-4">联系我们</h3>
                <ul class="space-y-2 text-neutral-400">
                    <li class="flex items-center">
                        <i class="fa fa-map-marker w-5 text-primary"></i>
                        <span>620志愿中心</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fa fa-phone w-5 text-primary"></i>
                        <span>400-123-4567</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fa fa-envelope-o w-5 text-primary"></i>
                        <span>service@volunteer.org.cn</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fa fa-clock-o w-5 text-primary"></i>
                        <span>周一至周日 9:00-18:00</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="border-t border-neutral-700 mt-8 pt-8 text-center text-neutral-400 text-sm">
            <p>© 2025 爱心志愿者平台 版权所有 | 京ICP备12345678号</p>
        </div>
    </div>
</footer>
